<template>
  <div class="gift_container" v-if="isGiftWin">
    <div class="box fff">
      <div class="item">
        <div
          class="inner_item cur_poi fs_14"
          v-for="item in mapperGiftType"
          :key="item.id"
          @click="handleGiftTabs(item)"
        >
          <div :class="{ inner_item_active: item.id === gifCurr }">
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="txt_box">
        <div class="inner_txt_box" v-for="item in giftLisChoos" :key="item.id">
          <div class="inner_txt_box_item">
            <!-- 宝箱前三 -->
            <img
              v-if="item.img"
              :src="item.img"
              style="width: 50px; height: 50px"
              alt=""
            />
            <!-- 是否提亮 -->
            <img
              v-if="store.profile.user.guizu === 1 && !item.img"
              style="width: 50px; height: 50px"
              :src="item.smimg"
              alt=""
            />
            <img
              v-if="store.profile.user.guizu === 0 && !item.img"
              style="width: 50px; height: 50px"
              :src="item.shimg"
              alt=""
            />
            <div class="fs_12">{{ item.name || item.desc }}</div>
          </div>
        </div>
      </div>
      <div class="gift_foot fff flex_row bs_bdb">
        <div class="up_down_flex">
          <div class="text fs_14">背包余额</div>
          <div class="btn fs_14 bs_bdb">兑换</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { computed, onMounted, ref } from "vue";
import { useCounterStore } from "../store";
import { giftListApi, getmybeibaoApi } from "../http";
const store = useCounterStore();
const activeName = ref("second");
const gifCurr = ref(0);
const gifList = ref([]);
const gifListTop = ref([]);

const getGifts = (type) => {
  giftListApi(type).then((res) => {
    console.log("：：：", res);
    if (res.data.errcode === 0) {
      gifList.value = res.data.list;
      gifListTop.value = res.data.baoxianggift;
    }
  });
};
// 背包
const getPack = () => {
  getmybeibaoApi().then((res) => {
    console.log("：：：", res);
  });
};
const handleGiftTabs = (val) => {
  gifCurr.value = val.id;
  getGifts(val.id);
};

const mapperGiftType = ref([
  { id: 0, label: "普通" },
  { id: 1, label: "贵族" },
  { id: 2, label: "守护" },
  { id: 3, label: "活动" },
  { id: 4, label: "等级" },
  { id: 5, label: "VIP" },
  { id: 6, label: "背包" },
]);
const giftLisChoos = computed(() => {
  if (gifCurr.value === 0) {
    gifListTop.value.forEach((v) => {
      gifList.value.splice(0, 0, v);
    });
    console.log("111111111111计算属性", gifList.value);
    return gifList.value;
  }
  return gifList.value;
});
const isGiftWin = ref(false);
const getGiftDialog = (val) => {
  console.log("打开礼物页面", val);
  isGiftWin.value = val;
  if (isGiftWin.value) {
    getGifts(gifCurr.value);
    getPack();
  }
};
onMounted(() => {
  console.log("xxxx");
  store.mittOb.on("giftDialog", getGiftDialog);
});
</script>
  
  <style scoped lang="scss">
.gift_container {
  position: fixed;
  bottom: 123px;
  right: 77px;
}
.box {
  width: 391px;
  height: 347px;
  background: #272c2f;
  display: flex;
  flex-direction: column;

  border-radius: 8px 8px 8px 8px;
  .item {
    display: flex;
    padding: 10px;
    flex-wrap: nowrap;
    .inner_item {
      flex: 1;

      padding: 7px 12px;
      box-sizing: border-box;
      color: #939596;
      //   text-align: center;
    }
    .inner_item_active {
      border-bottom: 1px solid #bc73fb;
      padding-bottom: 10px;
      color: #ffffff;
    }
  }
  .txt_box {
    margin-bottom: 65px;
    width: 100%;

    overflow: auto;
    padding: 11px 0;
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    .inner_txt_box {
      width: 25%;
      box-sizing: border-box;
      padding-bottom: 15px;
      .inner_txt_box_item {
        text-align: center;
      }
    }
  }
  .gift_foot {
    width: 100%;
    align-items: center;
    position: absolute;
    bottom: 0;
    justify-content: space-between;
    padding: 21px 17px 13px 17px;
    background: #313538;
    border-radius: 0px 0px 8px 8px;
    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #efe28b;
    }
    .btn {
      padding: 5px 15px;

      background: #efe28b;
      border-radius: 50px 50px 50px 50px;
      border: 1px solid #efe28b;
      opacity: 0.9;
      margin-left: 19px;
    }
  }
}
</style>
  